<template>
    <div class="dynamic">
      <p>动态组件</p>
      <p>
        <button @click="handle('first')">First</button>
        <button @click="handle('second')">Second</button>
        <button @click="handle('third')">Third</button>
      </p>
      <keep-alive>
        <component :is="current"></component>
      </keep-alive>
    </div>
</template>

<script>
import FirstView from '@/views/FirstView.vue';
import SecondView from '@/views/SecondView.vue';
import ThirdView from '@/views/ThirdView.vue';

export default {
  name: 'DynamicView',
  data(){
    return {
      current: 'second'
    }
  },
  components: {
    first: FirstView,
    second: SecondView,
    third: ThirdView
  },
  methods: {
    handle( name ) {
      this.current = name ;
    }
  }
}
</script>

<style scoped>
.dynamic {
    margin: 25px 0;
    border: 1px solid blue ;
}
.dynamic>p{
    margin: 5px 0;
}
</style>